<template>
  <!-- 页面标题栏 -->
  <div class="mb-6 flex items-center">
    <el-button icon="ArrowLeft" @click="goBack" plain> 返回</el-button>
    <h1 class="ml-4 text-2xl font-bold text-gray-900">
      {{ configId ? '编辑配置' : '添加配置' }}
    </h1>
  </div>
  <!-- 主要内容区域 -->
  <div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
    <!-- 左侧：基础信息卡片 -->
    <div class="xl:col-span-1">
      <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden h-full">
        <!-- 卡片头部 -->
        <div class="px-6 py-4 border-b border-gray-200">
          <h2 class="text-xl font-semibold text-gray-900">基础信息</h2>
          <p class="text-sm text-gray-600 mt-1">配置项的基本信息设置</p>
        </div>
        <!-- 卡片内容 -->
        <div class="p-6 space-y-5">
          <!-- 配置名称 -->
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-3">
              配置名称 <span class="text-red-500">*</span>
            </label>
            <el-input
              v-model="formData.name"
              placeholder="请输入配置名称"
              size="large"
              maxlength="50"
              show-word-limit
            >
              <template #prefix>
                <el-icon class="text-green-500">
                  <Document />
                </el-icon>
              </template>
            </el-input>
          </div>

          <!-- 排序权重 -->
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-3"> 排序权重 </label>
            <el-input-number
              v-model="formData.sort"
              :min="0"
              :max="9999"
              size="large"
              class="w-full"
            />
            <div class="mt-2 text-xs text-gray-500">
              <el-icon size="12" class="mr-1">
                <Sort />
              </el-icon>
              数值越大排序越靠前
            </div>
          </div>

          <!-- 显示状态 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-3"> 是否显示在菜单 </label>
            <el-select v-model="formData.is_menu" size="large" class="w-full">
              <el-option label="显示" :value="1"></el-option>
              <el-option label="隐藏" :value="2"></el-option>
            </el-select>
            <div class="mt-2 text-xs text-gray-500">
              <el-icon size="12" class="mr-1">
                <Sort />
              </el-icon>
              选择显示只能添加一条配置数据
            </div>
          </div>

          <!-- 提交按钮 -->
          <div class="pt-4">
            <el-button type="primary" @click="submit" class="w-full"> 提交配置 </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧：配置值卡片 -->
    <div class="xl:col-span-2">
      <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <!-- 卡片头部 -->
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
          <div>
            <h2 class="text-xl font-semibold text-gray-900">配置字段</h2>
            <p class="text-sm text-gray-600 mt-1">定义配置项的字段结构</p>
          </div>
          <el-button type="primary" icon="Plus" @click="addField" size="default" round>
            添加字段
          </el-button>
        </div>
        <!-- 卡片内容 -->
        <div class="p-6">
          <!-- 空状态 -->
          <div v-if="formData.config.length === 0" class="text-center py-16">
            <div
              class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full mb-4"
            >
              <el-icon size="32" class="text-blue-600">
                <Collection />
              </el-icon>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">暂无字段</h3>
            <p class="text-gray-500 text-sm mb-6">点击上方按钮添加第一个配置字段</p>
          </div>

          <!-- 字段列表 -->
          <div v-else class="space-y-4">
            <div
              v-for="(item, index) in formData.config"
              :key="index"
              class="bg-white rounded-lg shadow-md p-6"
            >
              <div class="flex md:space-x-6 items-end justify-between">
                <!-- 字段名称 -->
                <div class="flex-1 mb-4 md:mb-0">
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    字段名称 <span class="text-red-500">*</span>
                  </label>
                  <el-input v-model="item.name" placeholder="字段名称" size="large">
                    <template #prefix>
                      <el-icon class="text-green-500">
                        <Edit />
                      </el-icon>
                    </template>
                  </el-input>
                </div>
                <!-- 字段标识 -->
                <div class="flex-1 mb-4 md:mb-0">
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    字段标识 <span class="text-red-500">*</span>
                  </label>
                  <el-input v-model="item.identifier" placeholder="字段标识" size="large">
                    <template #prefix>
                      <el-icon class="text-green-500">
                        <Edit />
                      </el-icon>
                    </template>
                  </el-input>
                </div>
                <!-- 字段类型 & 值 -->
                <div class="flex-2">
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    字段类型 <span class="text-red-500">*</span>
                  </label>
                  <dynamicForm
                    v-model="item.type"
                    :options="item.options"
                    @update:options="item.options = $event"
                  />
                </div>
                <div class="flex-1">
                  <label class="block text-sm font-medium text-gray-700 mb-2"> 默认值 </label>
                  <el-input v-model="item.value" placeholder="字段值" size="large">
                    <template #prefix>
                      <el-icon class="text-green-500">
                        <Edit />
                      </el-icon>
                    </template>
                  </el-input>
                </div>
                <div class="flex-1">
                  <el-button
                    type="danger"
                    icon="Delete"
                    @click="removeField(index)"
                    size="large"
                    class="mt-6 md:mt-0"
                  >
                    删除
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { addConfigApi, updateConfigApi, getConfigDetailApi } from '@/api/config'
import { onMounted, reactive, ref } from 'vue'
import dynamicForm from '@/components/dynamicForm/index.vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const configId = router.currentRoute.value.query.id
const formData = reactive({
  id: 0,
  name: '',
  config: <
    {
      name: string
      type: string
      value: string
      identifier: string
      options: {
        label: string
        value: string
      }[]
    }[]
  >[],
  sort: 0,
  is_menu: 2,
})

const addField = () => {
  formData.config.push({
    name: '',
    identifier: '',
    type: 'text',
    value: '',
    options: [],
  })
}

const removeField = (index: number) => {
  formData.config.splice(index, 1)
}
const getConfigDetail = async () => {
  if (configId) {
    const { data } = await getConfigDetailApi(configId)
    Object.assign(formData, data)
  }
}
const submit = async () => {
  const res: any = formData.id ? await updateConfigApi(formData) : await addConfigApi(formData)
  if (res.code === 200) {
    ElMessage.success(res.message)
    goBack()
  }
}
const goBack = () => {
  router.push({
    path: '/config/config',
  })
}
onMounted(() => {
  getConfigDetail()
})
</script>

<style scoped></style>
